<template>
  <div class="filter-box">
    <div class="head">
      <div class="cancle" @click="onCancle">取消</div>
      <div class="title">选择部门/人员</div>
      <div class="sure" @click="onConfirm">确定</div>
    </div>
    <div class="cascader">
      <div class="one" :class="{ group: cascaderSecList.length > 0 }">
        <div class="li" :class="{ li_choose: JSON.stringify(activeOne) == '{}' }" @click="clickOne('', 'one')">
          全部
        </div>
        <div
          class="li"
          :class="{ li_choose: item.orgId == activeOne.orgId }"
          v-for="item in cascaderOneList"
          :key="item.orgId"
          @click="clickOne(item, 'one')">
          {{ item.orgName }}
        </div>
      </div>
      <div class="sec" v-if="cascaderSecList.length > 0">
        <div
          class="li"
          :class="{ li_choose: item.userId == activeSec.userId }"
          v-for="item in cascaderSecList"
          :key="item.userId"
          @click="clickOne(item, 'sec')">
          {{ item.userName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterPerson',
  components: {},
  props: {
    cascaderOneList: {
      type: Array,
      default: () => [],
    },
    confirmInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cascaderSecList: [],
      activeOne: {},
      activeSec: {},
    }
  },
  watch: {
    confirmInfo: {
      handler(news) {
        if (news) {
          this.activeOne = news.oneInfo
          this.activeSec = news.secInfo
          this.cascaderSecList = news.secList
          if (!news.secList.length && this.cascaderOneList.length === 1) {
            this.cascaderSecList = this.cascaderOneList[0].userList
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onCancle() {
      this.$emit('cancle')
    },
    onConfirm() {
      const data = {
        oneInfo: this.activeOne,
        secInfo: this.activeSec,
        secList: this.cascaderSecList,
      }
      this.$emit('confirm', data)
    },
    clickOne(item, type) {
      if (type === 'one') {
        if (this.activeOne.orgId != item.orgId) {
          this.activeSec = {}
          if (this.cascaderOneList.length !== 1) {
            this.cascaderSecList = []
          }
        }
        if (item) {
          this.cascaderSecList = item.userList
          this.activeOne = item
        } else {
          this.activeOne = {}
          if (this.cascaderOneList.length !== 1) {
            this.cascaderSecList = []
          }
        }
      } else if (type === 'sec') {
        if (!this.activeOne.orgId) {
          this.activeOne = this.cascaderOneList[0]
        }
        this.activeSec = item
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.filter-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    // font-size: 14px;
    background-color: #f5f6fa;
    .title {
      font-size: 16px;
      color: #333;
    }
  }
  .cascader {
    display: flex;
    justify-content: space-around;
    flex: 1;
    text-align: center;
    overflow: hidden;
    padding-bottom: 10px;
    .one,
    .sec {
      flex: 1;
      overflow-y: auto;
      padding-top: 10px;
    }
    .group {
      border-right: 1px solid #ccc;
    }
    .li {
      padding: 6px 12px;
    }
    .li_choose {
      color: #e1af54;
    }
  }
}
</style>
